
const id = location.search.split("?")[1];

// 方法一：获取所有商品数据，前端筛选（不推荐）
// 方法二：根据id请求后端接口，直接获取指定数据（后端筛选）（推荐）

ajax("http://localhost:3000/api",res=>{
    res = JSON.parse(res).msg;
    console.log(res);
    let i = 0;
    res.some((val,idx)=>{
        i = idx;
        return val.proId === id
    })

    console.log(res[i])
    // 渲染小图
    $(".smlbox>img").src = res[i].img;
    // 渲染大图
    $(".bigimg>img").src = res[i].img;
    // 渲染图片列表
    let str = "";
    res[i].img2.forEach(val=>{
        console.log(res);
        str += `<li><img src="${val}" alt=""></li>`
    })
    $(".magnifier").innerHTML = str;

    // 渲染标题
    $(".title_text").innerHTML = res[i].proName;
    // 计算并渲染现价
    $(".price").innerHTML = "￥" + (res[i].price * (res[i].discount / 10)).toFixed(1);
    // 渲染原价
    $("._price").innerHTML = "￥" + res[i].price;




    new Magnifier({
        left:document.getElementById("left"),
        right:document.getElementById("right"),
        sBspan:document.querySelector(".smlbox span"),
        sBox:document.querySelector(".smlbox"),
        bBox:document.querySelector(".bigimg"),
        sBimg:document.querySelector(".smlbox img"),
        bBimg:document.querySelector(".bigimg img"),
        imgBox:document.querySelector(".magnifier"),
        imgs:document.querySelectorAll(".magnifier li img")
    })





},{
    type:"getGoods"
})


function $(s){
    return document.querySelector(s);
}


function ajax(url, callback, data){
    let str = "";
    for(let i in data){
        str += `${i}=${data[i]}&`
    }
    url += "?" + str;
    const xhr = new XMLHttpRequest();
    xhr.open("get",url)
    xhr.onload = function(){
        if(xhr.status === 200){
            callback(xhr.responseText)
        }
    }
    xhr.send();
}






function Magnifier(ops){
    this.left = ops.left;
    this.right = ops.right;
    this.sBspan = ops.sBspan;
    this.sBox = ops.sBox;
    this.bBox = ops.bBox;
    this.sBimg = ops.sBimg;
    this.bBimg = ops.bBimg;
    this.imgBox = ops.imgBox;
    this.imgs = ops.imgs;
    this.imgBox.style.width = (this.imgs.length+1)*this.imgs[0].offsetWidth +"px";
    this.index = 0;
    this.addEvent();
}
Magnifier.prototype.addEvent = function(){
    const _this = this;
    this.sBox.onmouseenter = function(){
        _this.show();
    }
    this.sBox.onmouseleave = function(){
        _this.hide();
    }
    this.sBox.onmousemove = function(eve){
        const e = eve||window.event;
        _this.move(e); 
    }
    this.left.onclick = function(){
        _this.leftChangeIndex();
    }
    this.right.onclick = function(){
        _this.rightChangeIndex();
    }
    for(let i=0;i<this.imgs.length;i++){
        this.imgs[i].onclick = ()=>{
            for(var j=0;j<this.imgs.length;j++){
                this.imgs[j].style.border = "1px solid #EFF0F5";
            }
            console.log(i);
            this.bBimg.src = this.sBimg.src = this.imgs[i].src;
            this.imgs[i].style.border = "1px solid red"
        }
    }
}
Magnifier.prototype.rightChangeIndex = function(){
    if(this.index === this.imgs.length-5){
        this.index = 0;
    }else{
        this.index++;
    }
    this.render();
}
Magnifier.prototype.leftChangeIndex = function(){
    if(this.index === 0){
        this.index = 0
    }else{
        this.index--;
    }
    this.render();
}
Magnifier.prototype.render = function(){
    move(this.imgBox,{
        left:-this.index*this.imgs[0].offsetWidth
    })
}
Magnifier.prototype.show = function(){
    this.bBox.style.display = "block";
    this.sBspan.style.display = "block";
    this.sBspan.style.width = this.sBox.offsetWidth/(this.bBimg.offsetWidth/this.bBox.offsetWidth)+"px";
    this.sBspan.style.height = this.sBox.offsetHeight/(this.bBimg.offsetHeight/this.bBox.offsetHeight)+"px";
}
Magnifier.prototype.hide = function(){
    this.bBox.style.display = "none";
    this.sBspan.style.display = "none";
}
Magnifier.prototype.move = function(e){
    let L = e.pageX -(this.sBox.offsetWidth /2)- this.sBspan.offsetWidth +140;
    let T = e.pageY -this.sBox.offsetHeight- this.sBspan.offsetHeight/2 -20;


    if(L < 0) L = 0;
    if(T < 0) T = 0;
    if(L > this.sBox.offsetWidth - this.sBspan.offsetWidth){
        L = this.sBox.offsetWidth - this.sBspan.offsetWidth
    }
    if(T > this.sBox.offsetHeight - this.sBspan.offsetHeight){
        T = this.sBox.offsetHeight - this.sBspan.offsetHeight
    }
    this.sBspan.style.left = L + "px";
    this.sBspan.style.top = T + "px";
    let X = L/(this.sBox.offsetWidth -  this.sBspan.offsetWidth);
    let Y = T/(this.sBox.offsetHeight - this.sBspan.offsetHeight);
    this.bBimg.style.left = (this.bBox.offsetWidth-this.bBimg.offsetWidth)*X+0.992+"px";
    this.bBimg.style.top = (this.bBox.offsetHeight-this.bBimg.offsetHeight)*Y-4.98+"px";
}
